<template>
    <div class="platform" v-loading="loading">
        <my-tag title="设计师详情" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="设计师昵称" prop="nickName">{{ form.designerName }}</el-form-item>
                    <el-form-item label="授权手机号" prop="phonenumber">{{ form.tel }}</el-form-item>
                    <el-form-item label="工作年限" prop="phonenumber">{{ form.workYears }}</el-form-item>
                    <el-form-item label="机构" prop="phonenumber">{{ form.company }}</el-form-item>
                    <el-form-item label="职位" prop="phonenumber">{{ form.position }}</el-form-item>
                    <el-form-item label="个人简介" prop="introduce">{{ form.personalProfile }}</el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item label="设计师头像" prop="headerImg">
                        <image-preview :src="form.headerImg" width="100px" height="100px"
                            :preview-src-list="[form.headerImg]"></image-preview>
                    </el-form-item>
                    <el-form-item label="设计师形象照" prop="figureImageUrl">
                        <image-preview :src="form.figureImageUrl" width="100px" height="100px"
                            :preview-src-list="[form.figureImageUrl]"></image-preview>
                    </el-form-item>
                    <el-form-item label="所获荣誉" prop="introduce">{{ form.honers || '暂无内容' }}</el-form-item>
                    <el-form-item label="荣誉证书" prop="honersImage">
                        <image-preview v-for="v in form.honersImage" :key="v.ossId" :src="v.url" width="100px"
                            height="100px" :preview-src-list="[v.url]" style="margin-right:10px;"></image-preview>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <my-tag :title="`设计方案(${total})`" :showSortImg="false"></my-tag>
        <div>
            <div class="mgt-bottom">
                <div class="tab-box" v-for="value in listData" :key="value.id">
                    <div class="tab-content">
                        <div class="tab-img">
                            <image-preview :src="value.coverImageUrl" :width="175" :height="160"
                                style="border-radius:8px;"></image-preview>
                        </div>
                        <div class="tab-info" @click="goDetail(value.schemeId)">
                            <div class="tab-top-info">
                                <div class="title">{{ value.schemeName }}</div>
                                <div class="tag-list">
                                    <el-tag type="info" size="small">{{ value.bedrooms }}室{{ value.livingRooms }}厅{{
                                        value.bathrooms }}卫{{ value.kitchens }}厨</el-tag>
                                    <el-tag type="info" size="small">{{ value.area }}m²</el-tag>
                                    <el-tag type="info" size="small">{{ value.style }}</el-tag>
                                    <el-tag type="info" size="small">¥{{ parseFloat(value.priceLower) / 10000 || '-' }}万-¥{{
                                        parseFloat(value.priceUpper) / 10000 || '-'
                                    }}万</el-tag>
                                </div>
                                <div class="base-list">
                                    <div class="date">{{ value.createTime }}上传</div>
                                    <div class="view"><i class="iconfont icon-eye"></i>{{ value.visits || 0 }}</div>
                                    <div class="thumbs"><i class="iconfont icon-thumb"></i>{{ value.likes || 0 }}</div>
                                </div>
                                <div class="tag-content-des"> {{ value.designIdea }} </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <pagination style="margin-bottom:60px;margin-top:0px;" v-show="total > 0" :total="total"
            v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getWorkList()" />
        <div class="platform-submit-btn">
            <el-button type="primary" @click="goBack">返回</el-button>
        </div>
    </div>
</template>
<script setup>
import { getPlatformDesignerDetail, getPlatformDesignerDetailWork } from '@/api/decor/designAgency.js'
import { getImgUrl } from '@/api/decor/designer.js'
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const listData = ref([])
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    schemStatus: 1,
})
const total = ref(0)
const loading = ref(true)
const data = reactive({
    form: {},
});
const { form } = toRefs(data);
// 获取详情数据
(() => {
    const designerId = route.params.designerId
    if (designerId) {
        getPlatformDesignerDetail(designerId).then((res) => {
            let designerData = res.data;
            designerData.headerImg = '';
            designerData.figureImageUrl = '';
            designerData.honersImage = '';
            let imgUrlPromises = [];
            // 获取头像的异步操作
            if (designerData.avatarId) {
                let avatarPromise = getImgUrl(designerData.avatarId).then((res) => {
                    designerData.headerImg = res.data[0].url;
                });
                imgUrlPromises.push(avatarPromise);
            }
            // 获取形象照图片的异步操作
            if (designerData.coverImage) {
                let coverImagePromise = getImgUrl(designerData.coverImage).then((res) => {
                    designerData.figureImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(coverImagePromise);
            }
            // 获取荣誉证书
            if (designerData.honersImgs) {
                let honersImages = getImgUrl(designerData.honersImgs).then((res) => {
                    designerData.honersImage = res.data;
                });
                imgUrlPromises.push(honersImages);
            }
            Promise.all(imgUrlPromises).then(() => {
                form.value = designerData;
                getWorkList()
            });
        })
    }
})();
const getWorkList = () => {
    getPlatformDesignerDetailWork({ ...queryParams.value, designerId: route.params.designerId }).then((response) => {
        let imgUrlPromises = [];
        let data = response.rows.map((v) => {
            return { ...v, coverImageUrl: '' }
        })
        data.forEach((v) => {
            if (v.coverImage) {
                let promise = getImgUrl(v.coverImage).then((res) => {
                    v.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(promise);
            }
        })
        Promise.all(imgUrlPromises).then(() => {
            listData.value = data;
            total.value = response.total;
            loading.value = false;
        });
    })
}
// 跳转
const goDetail = (schemeId) => {
    router.push('/designAgency/angencyDesignerSchem/' + schemeId)
}
// 修改按钮
const goBack = () => {
    router.go(-1)
}
</script>
<style lang="scss" scoped>
:deep(.pagination-container .el-pagination) {
    right: 46px;
}
</style>